<template>
    <AppHeader :title="subMitObj.title" :banAnimate="true" backgroundColor="#ffffff">
      <template #left>
        <img
          @click="onClickLeft"
          src="@/assets/images/icon-back-black.png"
          width="9"
          height="18"
        />
      </template>
      <!-- <template #right>
        <img
          @click="onClickRight"
          src="@/assets/images/listening/copy.png"
          width="18"
          height="18"
        />
      </template> -->
    </AppHeader>
    <div class="container">
      <template v-for="(item,inx) in list" :key="item.sid">
        <div class="top" v-html="item.module_type_name" v-if="item.module_type_name"></div>
        <div class="options-list">
          <template  v-for="(i,index) in item.children" :key="i.sid"  v-if="item.children.length">
            <template v-if="i.qtype === 1">
              <span  :key="index" :class="item.children[index].answer.sType ? 'circle-blue': ''" @click="viewGoto(item,i.qtype,index+1)">{{index +1}}</span>
            </template>

            <template v-if="i.qtype === 3 || i.qtype === 4 || i.qtype === 6 || i.qtype === 5">
              <template v-for="(j,p) in i.children.length" :key="p">
                    <span  :class="i.children[p].answer.sType ? 'circle-blue': ''" @click="viewGoto(item,i.qtype,j)">{{j}}</span>
                </template>
            </template>

          </template>
        </div>
      </template>
      <div class="btn" @click="submit">
        <van-button type="primary" block round color="linear-gradient( 270deg, #29F19C 0%, #02A1F9 100%)">交作业</van-button>
      </div>
      <van-dialog v-model:show="show" title="提示" show-cancel-button @confirm="confirm">
          <div style="width: 80%;margin:20px auto;">您还有{{NotDone}}道题目未完成，确定交卷吗?</div>
      </van-dialog>
    </div>
  </template>
  
  <script setup>
  import AppHeader from "@/components/AppHeader.vue";
  import { useRouter } from "vue-router";
  import {onMounted ,ref} from 'vue'
  import { showDialog } from 'vant';
  import { saveExercise } from "@/api/writtenTest";
  const router = useRouter();
  const list = ref([])
  const NotDone = ref(0)
  const onClickLeft = () => {
    router.back();
  };
  const onClickRight = () => { 
    router.push('/writtenTest/singleTest')
  }
  var subMitObj = JSON.parse(sessionStorage.getItem('resource'))
  const show = ref(false)
  const submit = () => { 
    NotDone.value = 0
    list.value.forEach(item=>{
      if(item.children.length){
        item.children.forEach(i=>{
          if(i.qtype === 1){
            if(i.answer.sorce === -1) {
              NotDone.value ++ 
            }
          }else if(i.qtype === 3 || i.qtype === 4 || i.qtype === 6 || i.qtype === 5){
            i.children.forEach(k=>{
              if(k.answer.sorce === -1) {
                NotDone.value ++ 
              }
            })
          }
        })
      }
    })
    if(NotDone.value > 0){
      show.value=true
    }else{
        confirm()
    }
  }
  const confirm = ()=>{
    var answer_score_json = []
    list.value.forEach(item=>{
      if(item.children.length){
        item.children.forEach(i=>{
          if(i.qtype === 1){
            answer_score_json.push({
                score:i.answer.sorce,
                color:(i.answer.isAnswer && i.answer.sorce) ? 'green' :  (!i.answer.isAnswer && i.answer.sorce === 0) ? 'red' : 'yellow'
            })
          }else if(i.qtype === 3 || i.qtype === 4 || i.qtype === 6 || i.qtype === 5){
            i.children.forEach(k=>{
              answer_score_json.push({
                  score:k.answer.sorce,
                  color:(k.answer.isAnswer && k.answer.sorce) ? 'green' :  (!k.answer.isAnswer && k.answer.sorce === 0) ? 'red' : 'yellow'
              })
            })
          }
        })
      }
    })
    var params = {
      source_id:subMitObj.id ,
      question_type:0,
      question_source_type:4,
      use_time:sessionStorage.getItem('time') *1,
      answer_score_json:JSON.stringify(answer_score_json),
      total_score:subMitObj.ref_score,
      json:JSON.stringify(subMitObj)
    }
    saveExercise(params).then(res=>{
      sessionStorage.setItem('successObj',JSON.stringify(res.data))
      router.push('/writtenTest/readScore')
    })
  }
  const viewGoto = (item,index,i) =>{
  //   qtype = 1 选择题
  // qtype = 3 填空题
  // qtype = 5 / 4 一个阅读理解有多个选择题
  // qtype = 6 html标签，填空题
    var obj = index
    var sid = item.sid
    if(obj===1){
      router.push({
        path: "/writtenTest/singleTest",
        query: { sid ,num:i},
      });
    }else if(obj === 5 || obj === 4 || obj===6){//阅读理解
      router.push({
        path: "/writtenTest/readTest",
        query: { sid,num:i },
      });
    }else if(obj === 3) {  //选择
      router.push({
        path: "/writtenTest/singleRightTest",
        query: { sid,num:i },
      });
    }
  }
  onMounted(()=>{
    list.value = JSON.parse(sessionStorage.getItem('resource')).parts
  })
</script>
  
<style lang="scss" scoped>
  .container {
    height: 100%;
    background-color: #ffffff;
    padding-top: 44px;
    padding-bottom: 100px;
    overflow-y: auto;
   .top{
    font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: #333333;
  line-height: 22px;
  text-align: left;
  font-style: normal;
  padding: 15px 10px;
   }
  .options-list{
    padding: 15px 10px;
    span{
  margin: 7.5px;
  width: 48px;
  height: 48px;
  border: 1px solid #E5E5E5;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 46px;
  text-align: center;
  font-style: normal;
  display: inline-block;
      border-radius: 50%;
  &.circle-blue{
    border: 1px solid #0CB76C;
    color: #0CB76C;
  }
  
  &.circle-red{
    border: 1px solid #FA192C;
    color: #FA192C;
  }
    }
  }
   .btn{ padding: 30px 10px;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }
  </style>
  